<template>
    <div>
        <Header :left="true" leftText="返回" title="主动抽查" />
        <div>
            <van-tabs v-model="active" type="card" :offset-top="80" :sticky="true" @click="tabChange" swipeable
                style="top: 8px; font-size: 15px" color="#1c6c8d">
                <!-- 待抽查 -->
                <van-tab title="待检查" style="font-size: 15px">
                    <van-button :block="true" class="buttonRight" type="primary" @click="openExtractDialog" text="抽取任务" />
                    <van-row style="margin-top: 60px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">待检查记录</van-col>
                    </van-row>
                    <div class="textScroll">
                        <!-- 循环数据开始 -->
                        <div v-for="item in itemsOne" :key="item.id">
                            <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                <span></span>
                            </div>
                            <div class="divStyle" @click.prevent="showDetail(item)">
                                <van-row style="margin-top: 10px; margin-left: 10px">
                                    <van-col span="8" style="font-weight: bold; color: #a9a9a9">{{
                                        item.equipName
                                    }}</van-col>
                                    <van-col span="14" style="color: #a9a9a9">
                                        <van-icon name="assets/time.png" />
                                        {{ item.finishTime }}
                                    </van-col>
                                </van-row>
                                <van-divider />
                                <van-row style="margin-left: 10px">
                                    <van-col span="18" style="color: #a9a9a9">设备编码：{{ item.equipCode }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">任务单号：{{ item.taskCode }}</van-col>
                                </van-row>
                                <van-row style="margin-left: 10px; margin-top: 10px">
                                    <van-col span="18" style="color: #a9a9a9">执行人：{{ item.executer }}</van-col>
                                    <van-col span="3">
                                        <van-button color="#f58220" style="
                                    width: 75px;
                                    height: 30px;
                                    margin-bottom: 10px;
                                    right: 0px;
                                    " type="primary" text="待检查" />
                                    </van-col>
                                    <!-- <van-col span="3"><van-image width="40" height="30" src="assets/noAssign.png"/></van-col> -->
                                </van-row>
                            </div>
                        </div>
                        <!-- 循环数据结束 -->
                    </div>
                    <van-pagination class="pagination" force-ellipses v-model="queryParams.pageNum"
                        :total-items="queryParams.total" @change="queryWaitCheckTaskList"
                        :items-per-page="queryParams.pageSize" />
                </van-tab>
                <!-- 已抽查 -->
                <van-tab title="已检查">
                    <van-row style="margin-top: 20px">
                        <van-col>
                            <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
                        </van-col>
                        <van-col class="message">已检查记录</van-col>
                    </van-row>
                    <div class="textScroll2">
                        <!-- 循环数据开始 -->
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                            <div v-for="item in itemsTwo" :key="item.id">
                                <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                                    <span></span>
                                </div>
                                <div class="divStyle">
                                    <van-row style="margin-top: 10px; margin-left: 10px">
                                        <van-col span="13" style="font-weight: bold; color: #a9a9a9">{{ item.equipName
                                        }}</van-col>
                                        <van-col span="11" style="color: #a9a9a9">
                                            <van-icon name="assets/time.png" />
                                            {{ item.finishTime }}
                                        </van-col>
                                    </van-row>
                                    <van-divider />
                                    <van-row style="margin-left: 10px">
                                        <van-col span="18" style="color: #a9a9a9">设备编码：{{ item.equipCode }}</van-col>
                                    </van-row>
                                    <van-row style="margin-left: 10px; margin-top: 10px">
                                        <van-col span="20" style="color: #a9a9a9">任务单号：{{ item.taskCode }}</van-col>
                                    </van-row>
                                    <van-row style="margin-top: 10px; margin-left: 10px">
                                        <van-col span="18" style="color: #a9a9a9">执行人：{{ item.executer }}</van-col>
                                    </van-row>
                                    <van-row style="margin-top: 10px; margin-left: 10px">
                                        <van-col span="10" style="hight: 20px; color: #a9a9a9">检查人：{{ item.checkUser }}
                                        </van-col>
                                    </van-row>
                                    <van-row style="margin-top: 10px; margin-left: 10px">
                                        <van-col span="20" style="color: #a9a9a9">检查时间：{{ item.endTime }}</van-col>
                                        <van-col span="3">
                                            <van-button color="#f58220" style="
                                        width: 75px;
                                        height: 30px;
                                        margin-bottom: 10px;
                                        right: 20px;
                                    " type="primary" text="已检查" />
                                        </van-col>
                                    </van-row>
                                </div>
                            </div>
                        </van-list>

                        <!-- 循环数据结束 -->
                    </div>
                </van-tab>
            </van-tabs>

            <van-dialog v-model="showDialog" title="当班任务抽取" show-cancel-button confirm-button-text="确认"
                cancel-button-text="取消" @confirm="extractConfirm" @cancel="showDialog = false">
                <van-divider>
                    <van-tag type="warning">当前班次已完成任务数量：{{ shiftFinishedNum }}</van-tag>
                </van-divider>
                <van-cell-group>
                    <van-field v-model="extractNum" type="digit" label="抽取数量:" placeholder="请输入整数" />
                </van-cell-group>
            </van-dialog>
        </div>
    </div>
</template>
<script>
import {
    Icon,
    Button,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
    Image as VanImage,
    Divider,
    Checkbox,
    Pagination,
    Panel,
    Toast,
    Dialog,
    List,
    Tag,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
    removeToken,
    getToken,
    setBaseApiFrefix,
    getBaseApiFrefix,
} from "@/libs/auth";
import { memory } from "@/libs/utils";
Vue.use(Cell);
Vue.use(Tag);
Vue.use(Field);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(List);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
    components: {
        Button,
        Header,
        Icon,
        CellGroup,
        Cell,
        Field,
        tab,
        tabs,
        Col,
        Row,
    },

    data() {
        return {
            //动态加载数据
            loading: false,
            finished: false,
            showDialog: false,
            user: [], //登录用户信息
            shiftFinishedNum: 0, //当班任务完成数量
            extractNum: null, //抽取数量
            //分页参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
            },

            //下拉刷新动态
            loadParams: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
            },

            allSelected: false,
            screenWidth: 0,
            checked: true,
            active: 2,
            currentPage: 1,
            fileUrl: "",
            itemsOne: [
                // { id: 1, equip: '注塑机1', time: '2020-12-02 22:08:00', user: '测试账户1', checked: true },
                // { id: 2, equip: '注塑机2', time: '2020-12-03 22:08:00', user: '测试账户2', checked: false },
                // { id: 3, equip: '注塑机3', time: '2020-12-03 22:08:00', user: '测试账户3', checked: true },
                // { id: 4, equip: '注塑机4', time: '2020-12-03 22:08:00', user: '测试账户4', checked: true },
                // { id: 5, equip: '注塑机5', time: '2020-12-03 22:08:00', user: '测试账户5', checked: false },
            ],
            itemsTwo: [], //已指派列表
        };
    },
    created: function () {
        let oldHight = api.winWidth;
        this.screenWidth = oldHight;
        //获取当前系统登录用户
        this.user = JSON.parse(storage.get("user"));

        let tkn = getToken();
        if (!tkn) {
            api.openWin({
                name: "login",
                url: "./login-login.html",
                rect: {
                    x: 0,
                    y: 150,
                    w: api.winWidth,
                    h: api.winHeight,
                },
            });
        }

        this.queryWaitCheckTaskList();
    },
    methods: {
        //已指派数据动态加载
        onLoad() {
            //页数+1
            this.loadParams.pageNum = this.loadParams.pageNum + 1;
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                this.queryCheckedTaskList();
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.itemsTwo.length >= this.loadParams.total) {
                    this.finished = true;
                }
            }, 1000);
        },

        //查询已检查任务
        async queryCheckedTaskList() {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() +
                    "/app/my/qualit/list?pageNum=" +
                    _this.loadParams.pageNum +
                    "&pageSize=" +
                    _this.loadParams.pageSize,
                    { body: { type: "0", isFinished: "1" } }
                );

                if (res.code === 200) {
                    Toast.clear();
                    _this.itemsTwo = res.rows;
                    _this.loadParams.total = res.total;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },

        //tab切换
        tabChange(name, title) {
            if (name == 0) {
                //待指派界面
                this.queryWaitCheckTaskList();
            } else if (name == 1) {
                //已指派界面
                this.queryCheckedTaskList();
            }
        },
        //详情展示
        showDetail(item) {
            //查询点检项相关信息
            this.queryNoEditTask(
                {
                    body: {
                        taskCode: item.taskCode,
                        siteKey: item.siteKey,
                        equipCode: item.equipCode,
                    },
                },
                item
            );
        },

        //查询待检查任务
        async queryWaitCheckTaskList() {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() +
                    "/app/my/qualit/list?pageNum=" +
                    _this.queryParams.pageNum +
                    "&pageSize=" +
                    _this.queryParams.pageSize,
                    { body: { type: "0", isFinished: "0" } }
                );

                if (res.code === 200) {
                    Toast.clear();
                    _this.itemsOne = res.rows;
                    _this.queryParams.total = res.total;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },

        //打开抽取弹窗
        async openExtractDialog() {
            let _this = this;
            _this.shiftFinishedNum = 0;
            //查询当班完成数量
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/app/my/qualit/shiftFinishTask/",
                    {
                        body: { siteKey: _this.user.site },
                    }
                );

                if (res.code === 200) {
                    Toast.clear();
                    _this.shiftFinishedNum = res.total;
                    _this.showDialog = true;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },

        //檢查抽取确认
        async extractConfirm() {
            let _this = this;
            if (_this.extractNum == null || _this.extractNum == 0) {
                Toast("抽取數量需为正整数!");
                return;
            } else if (_this.extractNum > _this.shiftFinishedNum) {
                Toast("抽取數量不能大于当班已完成数量!");
                return;
            }
            if (_this.itemsOne.length > 0) {
                _this.$ac.confirm(
                    {
                        title: "提示",
                        msg: "当前存在待检查的任务，是否确认再次抽取?",
                        buttons: ["确定", "取消"],
                    },
                    function (ret, err) {
                        if (ret.buttonIndex == 1) {
                            _this.extractTask();
                        } else if (ret.buttonIndex == 2) {
                            return;
                        }
                    }
                );
            } else {
                _this.extractTask();
            }
        },

        async extractTask() {
            let _this = this;
            //抽取任务
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/app/my/qualit/extractShiftTask/",
                    {
                        body: { batchNum: _this.extractNum, type: "0" },
                    }
                );

                if (res.code === 200) {
                    Toast("任务抽取成功!");
                    _this.queryWaitCheckTaskList();
                    _this.extractNum = null;
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                alert(JSON.stringify(e));
                Toast.fail(JSON.stringify(e));
            }
        },

        //检查任务
        async queryNoEditTask(data, item) {
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "请稍等...",
            });
            let that = this;
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() + "/equip/check/isExist",
                    data
                );
                Toast.clear();
                if (res.code === 200) {
                    if (res.taskItemList) {
                        //跳转到点检页面
                        this.$ac.openWin({
                            name: "task_finish_check",
                            url: "./my-task_finish_check.html",
                            pageParam: {
                                qualityItem: item,
                                equipCode: data.body.equipCode,
                                taskItemList: res.taskItemList,
                                taskFileList: res.taskFileList,
                                isCanEdit: false,
                            },
                        });
                        api.addEventListener(
                            {
                                name: "checkFinish",
                            },
                            function (ret, err) {
                                if (ret.value.qualityItem.isFinished == "1") {
                                    that.queryWaitCheckTaskList();
                                }
                            }
                        );
                    }
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
    },
};
</script>
<style>
body {
    background-color: White;
}

.pic {
    width: 100%;
    text-align: center;
}

.divMedia {
    margin-top: 10px;
    height: 190px;
    border: solid #dcdcdc;
    margin-left: 5px;
    margin-right: 15px;
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 1px;
}

.clickbtn {
    width: 1;
    margin: 5px 10px;
    line-height: 45px;
    border: 1px #ccc dashed;
    text-align: center;
}

.buttonRight {
    position: fixed;
    margin-top: -40px;
    right: 15px;
    width: 90px;
    height: 40px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
}

.buttonLeft {
    position: fixed;
    margin-top: -40px;
    right: 110px;
    width: 90px;
    height: 40px;
    background-color: #1c6c8d;
    border-color: #1c6c8d;
}

.message {
    font-size: 20px;
    margin-top: 0px;
    margin-left: -10px;
    font-weight: bold;
}

.divStyle {
    /* border: 1px solid #dcdcdc; */
    border-top-width: 3px;
    border-left-width: 3px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 4px;
}

.pagination {
    position: fixed;
    bottom: 15px;
    width: 100%;
    color: rgb(0, 0, 255);
    text-align: center;
}

.textScroll {
    display: inline-block;
    position: fixed;
    top: 13rem;
    bottom: 5px;
    overflow: scroll;
    right: 0;
    width: 100%;
    margin-bottom: 4.7rem;
    z-index: 1;
}

.textScroll2 {
    display: inline-block;
    position: fixed;
    top: 10rem;
    left: 0;
    bottom: 2px;
    overflow-y: scroll;
    width: 100%;
    margin-bottom: 1.7rem;
    z-index: 1;
    overflow-x: hidden;
    /*解决ios上滑动不流畅*/
    -webkit-overflow-scrolling: touch;
}
</style>
